@import "settings/style/variables";

.data-view-card {
  border: $--border-width solid $--border-color;
  background-color: $--box-bg-color;
  border-radius: $--border-radius;
  box-shadow: inset 0 0 15px 3px $--border-color;
  font-weight: bold;
  line-height: 1;

  &.showTab {
    box-shadow: unset;
  }

  .card-title {
    padding: 10px;
    color: $--font-color-2;
    font-size: $--font-size-1;
  }

  .card-tab {
    width: 100%;
    height: 100%;

    .tab-head {
      display: flex;
      align-items: center;
      font-size: $--font-size-1;
      color: $--font-color-1;
      border-bottom: $--border-width solid $--border-color;

      .tab-label {
        padding: 0 15px;
        height: 30px;
        line-height: 30px;
        border-radius: 4px 4px 0 0;
        cursor: pointer;

        &.active {
          background-color: $--act-bg-color;
        }
      }
    }

    .tab-content {
      width: 100%;
      height: calc(100% - 30px);
    }
  }
}
